<template>
	<div class="data-list">
		
		 <div class='data-item' @click='detail(item.days)' v-for='(item,idx) in dataList' :key='idx' >

            <div class='data-time'>
                <img src="../../static/images/date.png" class="">
                <div class='date-text'>
                    <div style='padding-top:36rpx;color:#fff' v-if="item.nianyue" >{{item.nianyue}}</div> 
                    <div style='padding-top:36rpx;color:#fff' v-if="isStatic" >{{item.nian}}</div>
                    <div v-if="item.tian" class='time-data'>{{item.tian}}</div>
                    <div v-if="isStatic" class='time-data'>{{item.yue}}<text>月</text></div>

                </div>
            </div>
            <div class='data-order '>
                <div>{{pageText.corder}}：<span class='num'>{{item.coffeeOrderCount}}</span></div>
                <div>{{pageText.gorder}}：<span class='num'>{{item.goodsOrderCount}}</span></div>
                <div class='total-num'>{{pageText.totle}}：<span  class='num'>{{item.coffeeOrderCount + item.goodsOrderCount}}</span> </div>
            </div>
            <div class='data-sales '>
                <div>{{pageText.cprice}}：<span class='num'>￥{{item.coffeeOrderPay}}</span></div>
                <div>{{pageText.gprice}}<span class='num'>￥{{item.goodsOrderPay}}</span></div>
                <div class='total-num'>合计：<span  class='num'>￥{{ (item.coffeeOrderPay + item.goodsOrderPay)}}</span> </div>
            </div>
        </div>  
        <div class="loading" v-if="LoadIng">正在加载……</div>
        <div class="noData" v-if="!more">没有更多了</div>
        <div class="noData" v-if="noData">没有记录</div>
	</div>
</template>

<script type="text/javascript">

	export default{
		props: ['dataList','more','LoadIng','isStatic','noData'],
		
		data(){
			return{
				pageText:{
		          'title'   : '咖缘吧运营管理系统',
		          'position': '定位中',
		          'location': '当前位置',
		          'corder'  : '咖啡订单量',
		          'gorder'  : '商品定单量',
		          'cprice'  : '咖啡销售额',
		          'gprice'  : '商品销售额',
		          'totle'   : '合计',        
		        }
			}
		},
		methods:{
			detail(days){
				wx.navigateTo({
		           url: '/pages/orderDetail/main?days='+days,
		        })
			}
		}
	}
</script>


<style>
page{
    height: 100%;
}

.data-item{
    display: flex;
    padding: 20rpx;
    margin: 0rpx 10rpx 30rpx 10rpx;
    background: #fff;
}
.data-time{
    width: 150rpx;
    height: 150rpx;
    position: relative;
    font-size: 24rpx;
     text-align: center;

}
.data-time image{
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
}
.date-text{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2
}
.time-bg{
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    top: 0;
    left: 0;
    z-index: 1
}
.time-data{
    font-size: 52rpx;
    color:#000;
    margin-bottom: 5rpx;
}
.data-order{
    border-right: 2rpx solid #eaeaea; 
}
.data-order,.data-sales{
    flex: 1;

    line-height: 50rpx;
    font-size: 22rpx;
    text-align: left;
    color: #999999;
}
.data-order view,.data-sales view{
    padding-left: 20rpx;
}
.data-item .num{
    color: red;
}
.total-num{
    font-weight: 600;
    margin: 0 auto;
    color: #000;
    border-top: 2rpx solid #eaeaea
}
	
</style>